<template>
  <div class="company">
    <van-card
      :desc="item.brief"
      :title="item.name"
      :thumb="item.pic"
      v-for="item in companyInfo"
      :key="item.id"
      v-model="list"
      @click="$router.push(`/frim/${item.id}`)"
    >
      <template #tags>
        <van-tag
          round
          type="primary"
          class="buttom"
          v-for="(item1, index) in item.tag"
          :key="index"
        >
          {{ item1 }}
        </van-tag>
      </template>
      <template #footer>
        <div class="location" style="float: left">
          <van-icon name="location" size="15" class="location1" />
          <span class="distance">{{ item.distance }}</span>
        </div>
        <span class="annotation"> {{ item.address }}</span>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [this.companyInfo],
      rand: [], //随机数数组
    }
  },
  props: {
    companyInfo: {
      require: true,
      type: Array,
    },
  },
  created() {
    // this.rand = rand.push(parseInt(Math.random() * this.list.length))
    // const index = parseInt(Math.random() * this.list.length)
    // console.log(index)
    // console.log(this.list[index])
    // this.list.push(this.list[index])
  },
  methods: {},
}
</script>

<style scoped lang="less">
.company {
  .van-card {
    background-color: #fff;
  }
  .van-card__content {
    margin-left: 20px;
    /deep/.buttom {
      background-color: #fff;
      border: 1px solid rgba(63, 81, 181, 100);
      color: rgba(63, 81, 181, 100);
      margin-right: 8px;
    }
    .van-card__title {
      margin-top: 20px;
      font-size: 28px;
      font-weight: 600;
    }
  }
  /deep/.van-card__footer {
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(240, 238, 238, 100);
    margin-top: 18px;
    /deep/.location {
      margin-right: 17px;
      width: 40px;
      height: 40px;
      color: rgba(151, 145, 145, 100);
    }
    .location1 {
      margin-right: 12px;
    }
    /deep/.annotation {
      color: rgba(151, 145, 145, 100);
      margin-bottom: 6px;
    }
  }
}
</style>
